<template>
  <x-sub-page :content="'整改方案确认'" @goBack="handleBack">
    <!-- 基本信息 -->
    <div class="scheme-affirm" v-loading="pageLoading">
      <el-descriptions
        direction="vertical"
        :column="4"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="整改通知单号">{{ detail.number }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{ detail.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="供应商需回复日期">{{ replaceDateTime(detail.replyDate) }}</el-descriptions-item>
        <el-descriptions-item label="供应商实际回复日期">{{
          replaceDateTime(detail.actualReplyDate) | emptyVal
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions direction="vertical" :column="1">
        <el-descriptions-item label="主要问题描述">{{ detail.description | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="改进要求">{{ detail.requires | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="整改通知附件">
          <x-upload
            :limit="9"
            :fileSize="30"
            :span="6"
            :old-file-list="detail.rectifyFileVoList || []"
            :file-type="['jpg', 'jpeg', 'png', 'ppt', 'pptx', 'pdf', 'xls', 'xlsx', 'doc', 'docx']"
            :tips="'支持上传PPT/PDF/EXCEL/WORD/PNG/JPG形式文件, 最多9个, 附件大小不超过30MB.'"
          />
        </el-descriptions-item>
      </el-descriptions>
      <Reject-detail :detail="detail" />
    </div>
    <div class="footer">
      <el-button @click="handleCancel">
        {{ $t('common.goBack') }}
      </el-button>
      <el-button type="danger" @click="isRejectDialogShow = true" :loading="loading">
        {{ $t('common.reject') }}
      </el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ $t('common.agreed') }}
      </el-button>
    </div>
    <x-dialog
      :title="'拒绝原因'"
      :close-on-click-modal="false"
      :show.sync="isRejectDialogShow"
      v-if="isRejectDialogShow"
      class="reject-dialog"
      lock-scroll
      append-to-body
      width="700px"
      @onCancel="isRejectDialogShow = false"
      @onSubmit="handleReject"
    >
      <el-input
        type="textarea"
        v-model="rejectContent"
        rows="8"
        placeholder="请输入拒绝原因"
        maxlength="2000"
        show-word-limit
      />
    </x-dialog>
  </x-sub-page>
</template>
<script>
  import { QueryDictMixin, replaceDateTime, selectDictLabel, throttle } from '@package/utils'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import RejectDetail from '../components/rejectDetail.vue'
  import { apiConfirmReply, apiGetRectifyInformDetail, apiRejectRectify } from '@/modules/supplier/api/rectifyInform.js'

  export default {
    name: 'RectifyInformSchemeAffirm',
    components: { RejectDetail },
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        loading: false,
        detail: {},
        srmDictKeys: ['srm_rectify.state', 'srm_rectify.source'],
        isRejectDialogShow: false,
        rejectContent: '',
        pageLoading: false
      }
    },
    computed: {
      rectifyId() {
        return this.$route.query?.rectifyId ?? '1'
      }
    },
    created() {
      this.initDictConfig()
      this.rectifyId && this.init()
    },
    methods: {
      selectDictLabel,
      replaceDateTime,
      async init() {
        try {
          const { data, code } = await apiGetRectifyInformDetail(this.rectifyId)
          if (code === EnumApiCode.Success) {
            this.detail = data
          }
        } finally {
          this.pageLoading = false
        }
      },
      handleBack() {
        this.handleCancel()
      },
      handleCancel() {
        this.$router.go(-1)
        this.closePages()
      },
      handleSubmit: throttle(async function () {
        const confirm = await this.$confirm('是否确定同意整改措施？', '提示')
        if (!confirm) {
          return false
        }
        try {
          this.loading = true
          const { code } = await apiConfirmReply(this.rectifyId)
          this.loading = false
          if (code === EnumApiCode.Success) {
            this.$message.success('确认整改措施成功!')
            this.handleCancel()
          }
        } catch (e) {
          this.loading = false
        }
      }, 1000),
      handleReject: throttle(async function () {
        if (!this.rejectContent) {
          this.$message.warning('请输入驳回原因')
          return false
        }
        this.loading = true
        try {
          const { code } = await apiRejectRectify({
            rectifyId: this.rectifyId,
            reject: this.rejectContent
          })
          if (code === EnumApiCode.Success) {
            this.$message.success('驳回成功!')
            this.isRejectDialogShow = false
            this.handleCancel()
          }
        } finally {
          this.loading = false
        }
      }, 1000)
    }
  }
</script>
<style lang="scss" scoped>
  .scheme-affirm {
    padding: 20px;
    overflow: auto;
    ::v-deep .title-style {
      color: #707683;
    }
    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .reply-list {
      background-color: #efefef;
      border-radius: 8px;
      padding: 20px;
      .reply-title {
        font-size: 16px;
        color: #333;
        margin: 0 0 20px;
      }

      ::v-deep .el-descriptions__body {
        background-color: inherit;
      }
    }
  }
  .footer {
    width: 100%;
    padding: 16px 0;
    display: flex;
    justify-content: center;
    box-shadow: 0 -2px 4px rgb(0 0 0 / 5%);
    z-index: 1;
    position: relative;
  }
</style>
